<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 基础题库 -->
        <!-- 新增 -->
        <div class="header">
          <div class="title">说明：目前支持学科和关键字条件筛选</div>
          <div>
            <el-button type="success" size="small" @click="addcl"><i class="el-icon-edit"></i> 新增试题 </el-button>
          </div>
        </div>
        <!-- 筛选 -->
        <el-form :model="form" label-width="80px" ref="forms">
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select v-model="value" placeholder="请选择" @change="xue">
                  <el-option v-for="item in form.subjectID" :key="item.id" :label="item.subjectName" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="试题类型">
                <el-select placeholder="请选择" v-model="shi">
                  <el-option v-for="item in shiti" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="题目备注" prop="remarks">
                <!-- <el-select placeholder="请选择" v-model="f1"></el-select> -->
                <el-input v-model="form.remarks"></el-input>
              </el-form-item>
              <div class="grid-content bg-purple"></div
            ></el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select placeholder="请选择" v-model="emv">
                  <el-option v-for="item in em" :key="item.id" :label="item.directoryName" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="难度">
                <el-select placeholder="请选择" v-model="difficulty">
                  <el-option v-for="item in difficultyArr" :key="item" :label="item" :value="item"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="企业简称" prop="abbreviation">
                <el-input v-model="form.abbreviation"></el-input>
              </el-form-item>
              <div class="grid-content bg-purple-light"></div
            ></el-col>
            <el-col :span="6" :gutter="20">
              <el-form-item label="标签">
                <el-select placeholder="请选择" v-model="f1"></el-select>
              </el-form-item>
              <el-form-item label="方向">
                <el-select placeholder="请选择" v-model="direction">
                  <el-option v-for="item in directionArr" :key="item" :label="item" :value="item"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="城市">
                <el-col :span="12"
                  ><div class="grid-content bg-purple">
                    <el-select placeholder="请选择" v-model="city" @change="cityss">
                      <el-option v-for="item in citylist" :key="item" :label="item" :value="item"> </el-option>
                      <!--  -->
                    </el-select>
                  </div></el-col
                >
                <el-col :span="12"
                  ><div class="grid-content bg-purple">
                    <el-select placeholder="请选择" v-model="f2">
                      <!--  -->
                      <el-option v-for="item in Citylist" :key="item" :label="item" :value="item"> </el-option>
                    </el-select></div
                ></el-col>
              </el-form-item>
              <div class="grid-content bg-purple"></div
            ></el-col>
            <el-col :span="6">
              <div class="elb">
                <el-form-item label="关键字" prop="keyword">
                  <el-input type="age" v-model="form.keyword"></el-input>
                </el-form-item>
                <el-form-item label="录入人">
                  <el-select placeholder="请选择" v-model="Input">
                    <el-option v-for="item in InputArr" :key="item" :label="item" :value="item"> </el-option>
                  </el-select>
                </el-form-item>
                <el-button size="small" @click="rest">清除</el-button>
                <el-button type="primary" size="small" @click="search"> 搜索</el-button>
              </div>
              <div class="grid-content bg-purple-light"></div
            ></el-col>
          </el-row>
        </el-form>
        <!-- 提示栏 -->
        <div class="tips"><i class="el-icon-info"></i> &nbsp;数据一共{{ pagination.total }}条</div>
        <!-- 数据 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="100px"> </el-table-column>
          <el-table-column prop="subject" label="学科" width="70px"> </el-table-column>
          <el-table-column prop="catalog" label="目录" width="70px"> </el-table-column>
          <el-table-column label="题型" width="70px"
            ><template v-slot="{ row }">
              {{ row.questionType | question }}
            </template></el-table-column
          >
          <el-table-column label="题干" width="200px">
            <template slot-scope="scope">
              <span v-html="scope.row.question"> scope.row.question</span>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" width="200px">
            <template v-slot="{ row }">
              {{ row.addDate | tabeldate }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="100px">
            <template slot-scope="scope">
              {{ scope.row.difficulty | Question }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人"> </el-table-column>
          <el-table-column label="操作" width="220px">
            <template slot-scope="scope">
              <!-- {{ scope.row }} -->
              <!-- 浏览 -->
              <el-link class="link" :underline="false"
                ><div class="btn" @click="view(scope.row)"><i class="el-icon-view "></i></div>
              </el-link>
              <!-- 编辑 -->
              <el-link class="link1" :underline="false" @click="linkrest(scope.row)"
                ><div class="btn"><i class="el-icon-edit"></i></div>
              </el-link>
              <!-- 删除 -->
              <el-link class="link2" :underline="false"
                ><div class="btn" @click="del(scope.row)"><i class="el-icon-delete"></i></div>
              </el-link>
              <!-- 精选题库 -->
              <el-link class="link3" :underline="false"
                ><div class="btn" @click="jingxuan(scope.row)"><i class="el-icon-check"></i></div>
              </el-link>
              <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagin">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage4"
            :page-sizes="[5, 15, 20, 40]"
            :page-size="pagination.pagesiize"
            layout=" sizes, prev, pager, next, jumper"
            :total="pagination.total"
          >
          </el-pagination>
        </div>
      </el-card>
      <!-- 浏览对话框 -->
      <articles :dialogVisible.sync="dialogVisible" ref="arti"></articles>
    </div>
  </div>
</template>

<script>
// 录入人
import { list as userList } from '@/api/base/users.js'

// 基础题库
import { list, remove, choiceAdd } from '@/api/hmmm/questions.js'
// import {createAPI}
// 学科列表
import { list as sublist } from '@/api/hmmm/subjects.js'
// 二级目录列表
import { list as directlist } from '@/api/hmmm/directorys.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import articles from '@/module-hmmm/components/articles-preview.vue'
export default {
  name: 'ques',
  components: {
    articles
  },
  data() {
    return {
      // 录入人
      Input: '',
      InputArr: [],
      // 方向
      direction: '',
      directionArr: ['o2o', '外包服务', '企业服务', '互联网金融', '企业咨询', '互联网', '电子商务', '其他'],
      // 难度
      difficulty: '',
      difficultyArr: ['简单', '一般', '困难'],
      // 试题类型选项
      shi: '',
      shiti: ['单选', '多选', '简单'],
      // 二级目录选项
      emv: '',
      // 二级目录
      em: [],
      // 区选项
      f2: '',
      // 城市选项
      city: '',
      // 城市列表
      citylist: [],
      // 县列表
      Citylist: [],
      // 控制浏览对话框的显示与隐藏
      dialogVisible: false,
      // 当前页id
      id: '',
      // 学科选项
      value: null,
      // 下拉菜单
      f1: {},
      // 筛选数据
      form: {
        // 学科
        subjectID: [],
        keyword: '',
        // 题目备注
        remarks: '',
        // 企业简称
        abbreviation: ''
      },
      tableData: [],
      pagination: {
        // 页容量
        pagesiize: 5,
        // 当前选中页
        currentPage4: 1,
        // 总条数
        total: 50,
        // 当前页数据总数
        yetotal: ''
      }
    }
  },
  created() {
    this.getlist(),
      // 获取学科列表
      this.getsublist()
  },
  methods: {
    // name: 'ques,
    // 学科选择框
    async xue() {
      console.log(this.value)
      const res = await directlist({
        subjectID: this.value
      })
      this.em = res.data.items
      this.emv = ''
      // console.log(res)
    },
    // 城市选择框
    cityss() {
      console.log(this.city)
      this.Citylist = citys(this.city)
      this.f2 = ''
    },
    // 精选
    jingxuan(val) {
      this.$confirm('此操作将加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '加入成功!'
          })
          choiceAdd({
            id: val.id,
            choiceState: 1
          })
          this.getlist()
          this.getlist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 删除按钮
    del(val) {
      // console.log(val.id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.$message.success('删除成功!')
          console.log(11)
          await remove({
            id: val.id
          })
          if (this.yetotal === 1 && this.currentPage4 > 1) {
            this.currentPage4--
          }
          this.getlist()
          this.getlist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      console.log(val)
    },
    //  浏览对话框
    view(val) {
      this.dialogVisible = true
      console.log(val.id)
      this.$refs.arti.getlist({ id: val.id })
    },
    // 修改链接
    linkrest(val) {
      // console.log(val)
      // this.id = val.id
      this.$router.push(`/questions/new?id=${val.id}`)
    },
    // 清除按钮
    rest() {
      this.$refs.forms.resetFields()
      // this.$refs.forms.resetFields()
      this.value = null
      this.f2 = ''
      this.city = ''
      this.emv = ''
      this.Input = ''
      this.direction = ''
      this.difficulty = ''
      this.shi = ''
      // console.log(111)
      // this.getsublist()
      this.getlist()
    },
    // 搜素框
    search() {
      this.getlist()
    },
    // 获取学科列表
    async getsublist() {
      const res = await sublist({
        pagesize: 100
      })
      const { data: ress } = await userList()
      // console.log(ress)
      // console.log('11111111111111111111')
      ress.list.forEach(item => {
        // console.log(item)
        this.InputArr.push(item.username)
      })

      // console.log(ress.list)
      this.form.subjectID = res.data.items
      // console.log('---------------------------')
      // console.log(res)
    },
    // 新增按钮
    addcl() {
      this.$router.push('/questions/new')
    },
    // 页容量发生改变
    handleSizeChange(val) {
      console.log(val)
      this.pagination.pagesiize = val
      this.getlist()
    },
    // 选中页数发生改变
    handleCurrentChange(val) {
      console.log(val)
      this.pagination.currentPage4 = val
      this.getlist()
    },
    // 获取基础题库列表
    async getlist() {
      const res = await list({
        page: this.pagination.currentPage4,
        pagesize: this.pagination.pagesiize,
        subjectID: this.value,
        keyword: this.form.keyword
      })
      this.tableData = res.data.items
      this.pagination.total = res.data.counts
      console.log(res)
      this.yetotal = res.data.items.length
      // console.log(res.data.items.length)
      // console.log(provinces)
      const a = provinces()
      this.citylist = a
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  .header {
    .title {
      font-size: 12px;
      color: pink;
    }
    height: 30px;
    display: flex;
    justify-content: space-between;
    line-height: 30px;
    margin-bottom: 20px;
  }
  .elb {
    // padding-left: 30px;
    text-align: right;
  }
  .tips {
    borde: 1px solid #ccc;
    padding: 10px 0 10px 20px;
    color: #909399;
    background-color: rgba(179, 174, 174, 0.329);
    border-radius: 2px;
    font-size: 13px;
  }
  .link {
    margin-right: 10px;

    .btn {
      text-align: center;
      width: 25px;
      color: #409eff;
      background: #ecf5ff;
      border-color: #b3d8ff;
      border: 1px solid pink;
      border-radius: 50% 50%;
      // text-decoration: none;
      &:hover {
        background-color: #409eff;
        color: #fff;
      }
    }
  }
  .link1 {
    margin-right: 10px;

    .btn {
      text-align: center;
      width: 25px;
      color: #67c23a;
      background: #f0f9eb;
      border-color: #c2e7b0;

      border: 1px solid pink;
      border-radius: 50% 50%;
      // text-decoration: none;
      &:hover {
        background-color: #67c23a;
        color: #fff;
      }
    }
  }
  .link2 {
    margin-right: 10px;

    .btn {
      text-align: center;
      width: 25px;
      color: #f56c6c;
      background: #fef0f0;
      border-color: #fbc4c4;
      border: 1px solid pink;
      border-radius: 50% 50%;
      // text-decoration: none;
      &:hover {
        background-color: #f56c6c;
        color: #fff;
      }
    }
  }
  .link3 {
    margin-right: 10px;

    .btn {
      text-align: center;
      width: 25px;
      color: #e6a23c;
      background: #fdf6ec;
      border-color: #f5dab1;
      border: 1px solid pink;
      border-radius: 50% 50%;
      // text-decoration: none;
      &:hover {
        background-color: #e6a23c;
        color: #fff;
      }
    }
  }
  .pagin {
    margin-top: 20px;
    text-align: right;
  }
}
</style>
